<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const appName = ref('杭州江杉电子商务有限公司')
const cur = ref(0)
const $router = useRouter()
const $r = useRoute()

const onItemClick = (menu, i) => {
  cur.value = i
  $router.push(menu.link)
  if (isMobileBrowser()) {
    const m = document.querySelector('#menus')
    m.style.display = 'none'
  }
}

const isMobileBrowser = () => {
  return /Mobi|Android/i.test(navigator.userAgent)
}

const menus = ref([
  {
    title: '首页',
    link: '/'
  },
  {
    title: '关于我们',
    link: '/about'
  },
  // {
  //   title: '公司产品',
  //   link: '/products'
  // },
  {
    title: '联系我们',
    link: '/contact'
  }
])

const onNavClick = () => {
  const m = document.querySelector('#menus')
  m.style.display = 'block'
  m.style.position = 'absolute'
  m.style.right = '0'
  m.style.top = '0'
  m.style.zIndex = 99
}
onMounted(() => {
  console.log($r)
  const arr = menus.value.map((v) => v.link)
  // debugger
  for (let i in arr) {
    if (arr[i] == $r.path) {
      cur.value = i
      break
    }
  }
})
</script>

<template>
  <div class="app-header flex border-b">
    <!-- logo -->
    <div class="logo flex-1 sm:basis-40 flex items-center p-6">
      <div class="basis-10 sm:basis-20">
        <img src="/static/logo.png" />
      </div>
      <div class="pl-2 flex-1 text-xl sm:text-2xl font-bold">{{ appName }}</div>
      <div class="menu-action sm:hidden block border p-1" @click="onNavClick">导航</div>
    </div>

    <!-- menu -->
    <div class="menus bg-white hidden sm:flex flex-1 justify-end items-center pr-8" id="menus">
      <div
        class="menu p-4 text-lg cursor-pointer"
        :class="{ active: i == cur }"
        v-for="(menu, i) in menus"
        :key="i"
        @click="onItemClick(menu, i)"
      >
        {{ menu.title }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.menu {
  border-bottom: 4px solid #fff;
}
.menu.active {
  border-bottom-color: #2e72b0;
}
</style>
